<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="card">
        <div class="card-header">
            <h3>订单</h3>
        </div>
        <div class="card-body">
            <el-table :data="list" fit size="mini" highlight-current-row>
                <el-table-column label="订单号" wi<!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Title</title>
                        <link rel="stylesheet" href="/layui/css/layui.css" media="all">
                        <style>
                            .layui-table-cell {
                                height: 60px;
                                line-height: 60px;
                            }
                            /* height: auto !important;
                              white-space: normal;
                              padding: 0px;
                          } */
                    
                            th .layui-table-cell {
                                height: 30px;
                                line-height: 30px;
                            }
                    
                            th .laytable-cell-1-0-7 {
                                height: 30px;
                                line-height: 30px;
                            }
                    
                            .layui-table img {
                                width: 100px;
                                height: 60px;
                            }
                        </style>
                    
                    </head>
                    <body>
                        <fieldset class="table-search-fieldset">
                            <legend>搜索信息</legend>
                            <div style="margin: 10px 10px 10px 10px">
                                <form class="layui-form layui-form-pane" action="">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">订单编号</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="order_number" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">收件人姓名</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="name" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        
                                        <div class="layui-inline">
                                            <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
                                                    class="layui-icon"></i> 搜 索</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </fieldset>
                    
                    
                        <table  id="ordersTable" lay-filter="test"></table>
                    
                    
 </body>
                    <script src="/layui/layui.js" charset="utf-8"></script>
                    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
                    
                    
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加订单 </button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除订单 </button>
                        </div>
                    </script>
                    
                    
                    
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    
                    <script>
                        layui.use(['form', 'table'], function () {
                            var table = layui.table,
                                form = layui.form,
                                $ = layui.jquery;
                    
                    
                            table.render({
                                elem: '#ordersTable',
                                //url:'orders.json'
                                url:'http://localhost:8080/orders/ordersPageData'
                                //,headers:{"token":token}
                                , title: '订单管理'
                                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                                    title: '提示'
                                    , layEvent: 'LAYTABLE_TIPS'
                                    , icon: 'layui-icon-tips'
                                }]
                                //, contentType: "application/x-www-form-urlencoded"
                                , cols: [[
                                    { type: 'checkbox', fixed: 'left' }
                                    , { field: 'id', title: '用户id', width: 80, fixed: 'left' }
                                    , { field: 'order_number', title: '订单编号', width: 120, edit: 'text' }
                                    , { field: 'goods', title: '商品信息', width: 100, edit: 'text' }
                                    , { field: 'name', title: '收件人姓名', width: 120, edit: 'text' }
                                    , { field: 'phone', title: '收件人电话', width: 180, edit: 'text' }
                                    , { field: 'address', title: '收件地址', width: 100 }
                                    , { field: 'amount', title: '购买数量', width: 100 }
                                    , { field: 'money', title: '支付金额', width: 100 }
                                    ,{ field: 'time',title:'订单日期',width:200}
                                    , { field: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                                ]]
                                , page: true
                            })
                    
                    
                            // 监听搜索操作
                            form.on('submit(data-search-btn)', function (data) {
                                var result = JSON.stringify(data.field);
                                layer.alert(result, {
                                    title: '最终的搜索信息'
                                });
                    
                                //执行搜索重载
                                table.reload('ordersTable', {
                                    //url: "/ordersPageData",
                                    page: {
                                        curr: 1
                                    }
                                    , where: {
                                        //searchParams: result
                                        "name": data.field.name,
                                        "sex": data.field.sex,
                                        "address": data.field.address,
                                        "phone": data.field.phone
                                    }
                                }, true);
                    
                                return false;  // 如果 改为 true   ，表格会 再查询一次 ,所以 这里写为 false
                            });
                    
                    
                            //头工具栏事件
                            table.on('toolbar(test)', function (obj) {
                                var checkStatus = table.checkStatus(obj.config.id);
                                switch (obj.event) {
                                    case 'getCheckData':
                                        // 得到 选中行对象
                                        var data = checkStatus.data;
                                        layer.alert(JSON.stringify(data));
                                        break;
                                    case 'getCheckLength':
                                        var data = checkStatus.data;
                                        layer.msg('选中了：' + data.length + ' 个');
                                        break;
                                    case 'isAll':
                                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                                        break;
                    
                                    case 'add':
                                        layer.open({
                                            title: '添加订单',
                                            shade: 0.2,
                                            type: 2,
                                            shadeClose: true,   // 点别的地方 是否关闭当前 layer    true收关闭   false 不关闭
                                            area: ['80%', '100%'],
                                            fixed: true, //不固定
                                            maxmin: true,
                                            content: './ordersadd.html',
                                            end: function (index) {
                    
                                                table.reload('ordersTable');
                                            }
                                        });
                                        break;
                                    case 'delete':
                                        layer.msg('delete');
                                        break;
                                  
                                 
                                    //自定义头工具栏右侧图标 - 提示
                                    case 'LAYTABLE_TIPS':
                                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                                        break;
                                };
                            });
                    
                    
                    
                            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                            table.on('tool(test)', function(obj){
                                var data = obj.data; //获得当前行数据
                                //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                                var layEvent = obj.event;
                                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                                if(layEvent === 'del'){ //删除
                                    layer.confirm('真的删除行么', function(index){
                                        // 向服务端发送删除请求
                                        // 此处可以发送ajax
                    
                                        $.get("http://localhost:8080/orders/deleteOrders",{"id":data.id},function (result){
                                            if (result.code == 0) {
                                                layer.msg("删除成功");
                                                obj.del(); //删除对应行（tr）的DOM结构
                                                table.reload('ordersTable');  // 删除完  重新加载下表格
                                            } else {
                                                layer.msg("删除失败");
                                            }
                                        },"json");
                                        layer.close(index);
                                    });
                                } else if(layEvent === 'edit'){ //编辑
                                    // 向服务端发送更新请求
                                    // 同步更新缓存对应的值
                    
                                    // 把要修改的数据 存到 localStorage ， 跳转到修改页面  再把它取出来展示 要修改的数据
                                    localStorage.setItem("user", JSON.stringify(data));  // 把数据存到 localStorage   字符串的形式存入
                    
                                    layer.open({
                                        title: '修改订单信息',
                                        shade: 0.2,
                                        type: 2,
                                        shadeClose: true,   // 点别的地方 是否关闭当前 layer    true收关闭   false 不关闭
                                        area: ['80%', '100%'],
                                        fixed: true, //不固定
                                        maxmin: true,
                                        content: './ordersupdate.html',
                                        end: function (index) {
                                            table.reload('ordersTable');
                                        }
                                    });
                                }
                            });
                    
                        })
                   
    
     

</script>
</html>